       <!-- 预告预警-天气预报 -->
<template>
    <div class='ybwarninfo'>
        <!-- <div class="ybwarninfo_tab">
            <span :class="[tabActive == 'future3Day'?'active':'']" @click="tabActive = 'future3Day'">未来3天</span>
            <span :class="[tabActive == 'future10Day'?'active':'']" @click="tabActive = 'future10Day'">未来10天</span>
        </div> -->
        <div class="future3DayConatin">
            <div class="titleConatin" ><div class="title1">未来3天</div></div>
            <div class="foreTextTitle">
                <span>{{projectConfig.cityName}}气象台</span>
                <span>{{moment(queryTime).format('YYYY年MM月DD日 HH时')}}</span>
            </div>
            <div class="foreTextDiv">
                <pre>
                {{ foreTxt }}
                </pre>
            </div>
            <div class="future3Day"></div>
            <div class="titleConatin" ><div class="title2">未来7天时序图</div></div>
            <div class="areaCodeChange">
                <span class="location"></span>
                <nut-cell title="" :desc="String(siteName)" @click="show = true"></nut-cell>
                <nut-popup v-model:visible="show" position="top">
                    <nut-picker v-model="siteId" :columns="options" title="请选择" @confirm="confirm" @cancel="show = false" v-model:visible="show"/>
                </nut-popup>
                <!-- <span class="changeIcon" @click="getfindYBDataBy7Days()">切换</span> -->
            </div>
            <div class="futureChartContainPra">
                <div class="futureChartContain">
                    <div class="top">
                        <div v-for="item in chartTopBottomData">
                            <div>{{item.text}}</div>
                            <div class="time">{{$moment(item.time).format("MM/DD")}}</div>
                            <div><img :src="item.apWp.src"/></div>
                            <div>{{item.apWp.text}}</div>
                            <div class="wd" :style="{transform:'rotate('+item.amWind+'deg)'}"><img src="@/assets/weathers/arrow.png" /></div>
                            <div>{{windGrade(item.amWs)}}</div>
                        </div>
                    </div>
                    <div id="chartDiv"></div>
                    <div class="bottom">
                        <div v-for="item in chartTopBottomData">
                            <div><img :src="item.pmWp.src"/></div>
                            <div>{{item.pmWp.text}}</div>
                            <div class="wd" :style="{transform:'rotate('+item.pmWind+'deg)'}"><img src="@/assets/weathers/arrow.png" /></div>
                            <div>{{windGrade(item.pmWs)}}</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- <div v-show="tabActive == 'future10Day'" class="future10DayConatin">
            未来10天
        </div> -->
    </div>
</template>
<script setup>
import legendconfig from "@/config/legendconfig.js";
import projectConfig from "@/config/projectConf.js";
import { fore3DayTxt,findYBDataBy7Days } from '@/api/ybweatherforecastApi'
import moment from "moment";
import * as echarts from 'echarts'
const tabActive = ref("future3Day");

const options = ref(projectConfig.areaData)
const siteName = ref(projectConfig.areaData[0].text);
const siteId = ref(projectConfig.areaData[0].value);
const show = ref(false);
const confirm = ({ selectedValue, selectedOptions }) => {
  console.log(selectedValue[0], selectedOptions[0])
  show.value = false;
  siteName.value =  selectedOptions[0].text;
  siteId.value =  selectedOptions[0].value;
  getfindYBDataBy7Days();
}

const foreTxt = ref("");
const queryTime = ref()
const getfore3DayTxt = ()=>{
    fore3DayTxt(queryTime.value).then(res => {
      
      //let prevnewstr = res.substring(res.indexOf("发布的")+3);
      //let nextstr = prevnewstr.substr(0,prevnewstr.indexOf("天气预报早知道"));
      //let nextstr2 = nextstr.substr(0,prevnewstr.indexOf("暴雨警报和南京城区天气预报")).replace("暴雨警报和全市天气预报","").replace(/ /g,'');
      // let resultStr = [];
      // nextstr.split("\n").map(item=>{
      //   let item2 = item.replace(/ /g,'');
      //   if(item2 !=""){
      //     resultStr.push(item2)
      //   }
      // })
      //debugger
      // let strfinal = resultStr.join("\n");
      //strfinal = strfinal.replace("暴雨警报和全市天气预报;","暴雨警报和全市天气预报\n").replace(";暴雨警报和全市天气预报;","。\n暴雨警报和全市天气预报\n").replace(/ /g,'');
      foreTxt.value = res.trim();
    })
}

const windGrade = (ws)=>{
    if(!ws){
        return '--级';
      }
      let grade = "0级"
      
      if(ws<= 0.2){
        grade = "0级"
      }else if(ws<= 1.5){
        grade = "1级"
      }else if(ws<= 3.3){
        grade = "2级"
      }else if(ws<= 5.4){
        grade = "3级"
      }else if(ws<= 7.9){
        grade = "4级"
      }else if(ws<= 10.7){
        grade = "5级"
      }else if(ws<= 13.8){
        grade = "6级"
      }else if(ws<= 17.1){
        grade = "7级"
      }else if(ws<= 20.7){
        grade = "8级"
      }else if(ws<= 24.4){
        grade = "9级"
      }else if(ws<= 28.4){
        grade = "10级"
      }else if(ws<= 32.6){
        grade = "11级"
      }else{
        grade = "12级"
      }
      return grade;
}

const getWp = (code)=>{
    let weatherObj = {
        "0.0":{
          text:'晴',
          src:new URL(`@/assets/weathers/sun.png`, import.meta.url).href
        },
        "1.0":{
          text:'多云',
          src:new URL(`@/assets/weathers/cloud.png`, import.meta.url).href
        },
        "2.0":{
          text:'阴',
          src:new URL(`@/assets/weathers/yin.png`, import.meta.url).href
        },
        "3.0":{
          text:'阵雨',
          src:new URL(`@/assets/weathers/zhenRain.png`, import.meta.url).href
        },
        "4.0":{
          text:'雷阵雨',
          src:new URL(`@/assets/weathers/lzy.png`, import.meta.url).href
        },
        "5.0":{
          text:'雷阵雨并伴有冰雹',
          src:new URL(`@/assets/weathers/lzybb.png`, import.meta.url).href
        },
        "6.0":{
          text:'雨夹雪',
          src:new URL(`@/assets/weathers/yjx.png`, import.meta.url).href
        },
        "7.0":{
          text:'小雨',
          src:new URL(`@/assets/weathers/smallRain.png`, import.meta.url).href
        },
        "8.0":{
          text:'中雨',
          src:new URL(`@/assets/weathers/medRain.png`, import.meta.url).href
        },
        "9.0":{
          text:'大雨',
          src:new URL(`@/assets/weathers/bigRain.png`, import.meta.url).href
        },
        "10.0":{
          text:'暴雨',
          src:new URL(`@/assets/weathers/by.png`, import.meta.url).href
        },
        "11.0":{
          text:'大暴雨',
          src:new URL(`@/assets/weathers/dby.png`, import.meta.url).href
        },
        "12.0":{
          text:'特大暴雨',
          src:new URL(`@/assets/weathers/tdby.png`, import.meta.url).href
        },
        "13.0":{
          text:'阵雪',
          src:new URL(`@/assets/weathers/smallSnow.png`, import.meta.url).href
        },
        "14.0":{
          text:'小雪',
          src:new URL(`@/assets/weathers/smallSnow.png`, import.meta.url).href
        },
        "15.0":{
          text:'中雪',
          src:new URL(`@/assets/weathers/medSnow.png`, import.meta.url).href
        },
        "16.0":{
          text:'大雪',
          src:new URL(`@/assets/weathers/bigSnow.png`, import.meta.url).href
        },
        "17.0":{
          text:'暴雪',
          src:new URL(`@/assets/weathers/bSnow.png`, import.meta.url).href
        },
        "18.0":{
          text:'雾',
          src:new URL(`@/assets/weathers/w.png`, import.meta.url).href
        },
        "19.0":{
          text:'冻雨',
          src:new URL(`@/assets/weathers/freeRain.png`, import.meta.url).href
        },
        "20.0":{
          text:'沙尘暴',
          src:new URL(`@/assets/weathers/scb.png`, import.meta.url).href
        },
        "21.0":{
          text:'小到中雨',
          src:new URL(`@/assets/weathers/medRain.png`, import.meta.url).href
        },
        "22.0":{
          text:'中到大雨',
          src:new URL(`@/assets/weathers/bigRain.png`, import.meta.url).href
        },
        "23.0":{
          text:'大到暴雨',
          src:new URL(`@/assets/weathers/by.png`, import.meta.url).href
        },
        "24.0":{
          text:'暴雨到大暴雨',
          src:new URL(`@/assets/weathers/dby.png`, import.meta.url).href
        },
        "25.0":{
          text:'大暴雨到特大暴雨',
          src:new URL(`@/assets/weathers/tdby.png`, import.meta.url).href
        },
        "26.0":{
          text:'小雪到中雪',
          src:new URL(`@/assets/weathers/medSnow.png`, import.meta.url).href
        },
        "27.0":{
          text:'中雪到大雪',
          src:new URL(`@/assets/weathers/bigSnow.png`, import.meta.url).href
        },
        "28.0":{
          text:'大雪到暴雪',
          src:new URL(`@/assets/weathers/bSnow.png`, import.meta.url).href
        },
        "29.0":{
          text:'浮尘',
          src:new URL(`@/assets/weathers/fc.png`, import.meta.url).href
        },
        "30.0":{
          text:'扬沙',
          src:new URL(`@/assets/weathers/ys.png`, import.meta.url).href
        },
        "31.0":{
          text:'强沙尘暴',
          src:new URL(`@/assets/weathers/qscb.png`, import.meta.url).href
        },
        "53.0":{
          text:'霾',
          src:new URL(`@/assets/weathers/m.png`, import.meta.url).href
        },
        "54.0":{
          text:'冰雹',
          src:new URL(`@/assets/weathers/lzy.png`, import.meta.url).href
        },
        "55.0":{
          text:'龙卷',
          src:new URL(`@/assets/weathers/lzy.png`, import.meta.url).href
        },
        "56.0":{
          text:'雷电',
          src:new URL(`@/assets/weathers/lzy.png`, import.meta.url).href
        }
      }
      if(code !=""){
        return weatherObj[code];
      }else{
        return {}
      }
}

const chartTopBottomData = ref([]);
const getfindYBDataBy7Days = ()=>{
    const weekDayText = ['周日','周一','周二','周三','周四','周五','周六'];
    let option = options.value.filter(item=>item.value == siteId.value)

    findYBDataBy7Days( 
        moment().format("YYYYMMDDHH0000"),
        option[0].lat,
        option[0].lon,
        "40",
        moment().format("YYYYMMDDHH0000"),
    ).then(res=>{
        chartTopBottomData.value = [];
        const{code,data} = res;
        if(code == 200){
            const time = data.time.split(",");
            const newData = data.data;
            const wpData = newData.filter(item=>item.element == "WP");
            const amWpData = wpData && wpData[0].am?wpData[0].am.split(","):[];
            const pmWpData = wpData && wpData[0].pm?wpData[0].pm.split(","):[];
            const windData = newData.filter(item=>item.element == "WD");
            const amWindData = windData && windData[0].am?windData[0].am.split(","):[];
            const pmWindData = windData && windData[0].pm?windData[0].pm.split(","):[];
            
            const amWsData = newData.filter(item=>item.element == "WS") ? newData.filter(item=>item.element == "WS")[0].am.split(","):[];
            const pmWsData = newData.filter(item=>item.element == "WS") ? newData.filter(item=>item.element == "WS")[0].pm.split(","):[];


            time.map((singleTime,index)=>{
              console.log("moment(singleTime).weekday()");
              console.log(moment(singleTime).weekday());
                const obj = {
                    text:(index == 0 ? "今天" : (index ==1 ? "明天":weekDayText[moment(singleTime).weekday()])),
                    time:singleTime,
                    apWp:getWp(amWpData[index]),
                    pmWp:getWp(pmWpData[index]),
                    amWind:amWindData[index],
                    pmWind:pmWindData[index],
                    amWs:amWsData[index],
                    pmWs:pmWsData[index]
                }
                chartTopBottomData.value.push(obj);
            })

            const tmaxData = newData.filter(item=>item.element == "TMAX") ? newData.filter(item=>item.element == "TMAX")[0].am.split(","):[];
            const tminData = newData.filter(item=>item.element == "TMIN") ? newData.filter(item=>item.element == "TMIN")[0].pm.split(","):[];

        

            const legend = legendconfig["legend"]["TMP_"+moment().format("MM")+"M"];
            const pieces = [];
            const imageData = legend.imageData;
            legend.levels.map((level,index)=>{
                if(index == 0){
                    pieces.push({
                        max:level,
                        color:`rgba(${imageData[0]},${imageData[1]},${imageData[2]},1)`
                    })
                }else if(index == legend.levels.length-1){
                    pieces.push({
                        min:legend.levels[index],
                        color:`rgba(${imageData[index*4]},${imageData[index*4+1]},${imageData[index*4+2]},1)`
                    })
                }else{
                    pieces.push({
                        min:legend.levels[index-1],
                        max:legend.levels[index],
                        color:`rgba(${imageData[index*4]},${imageData[index*4+1]},${imageData[index*4+2]},1)`
                    })
                }
            })
        
            const option = {
                grid:{
                    show:false,
                    top:"0px",
                    left:"0px",
                    bottom:"20px",
                    right:"0px",
                },
                xAxis: {
                    type: 'category',
                    show:false,
                    data: time
                },
                yAxis: [
                {
                    show:false,
                    scale:true
                },
                {
                    show:false,
                    scale:true
                }
                ],
                tooltip: {	
                    show: true,
                    trigger:'axis',
                },
                visualMap: {
                    show: false,
                    dimension: 1,
                    pieces:pieces,
                },
                series: [
                    {
                    name: '最高温',
                    type: 'line',
                    smooth: true,
                    data: tmaxData,
                    yAxisIndex:0,
                    label:{
                        show:true,
                        formatter: '{c} ℃',
                        position:'bottom',
                        textStyle:{
                            fontSize:11,
                            color:'black'
                        }
                    }
                    },
                    {
                    name: '最低温',
                    type: 'line',
                    smooth: true,
                    yAxisIndex:0,
                    data: tminData,
                    label:{
                        show:true,
                        position:'bottom',
                        formatter: '{c} ℃',
                        textStyle:{
                            fontSize:11,
                            color:'black'
                        }
                    }
                    }
                ]
                }
                var chartDom = document.getElementById("chartDiv");
                var myChart = echarts.init(chartDom);
                option && myChart.setOption(option);
            }
        });
}
onMounted(() => {
    let hour = 5;
    if(moment().hours()>=15){
        hour = 15;
    }
    // if(moment().hours()>=16){
    //     hour = 16;
    // }
    queryTime.value = moment().hour(hour).format("YYYY-MM-DD HH:00:00")
    // if (hour == 5) {
    //     queryTime.value = moment().subtract(1, 'days').hour(hour).format("YYYY-MM-DD HH:00:00");
    // } else {
    //     queryTime.value = moment().hour(hour).format("YYYY-MM-DD HH:00:00")
    // }
    getfore3DayTxt();
    getfindYBDataBy7Days();
});

</script>
<style>
.areaCodeChange{
    .nut-cell{
        width: 60px;
        padding: 0px;
        text-align: left;
        box-shadow:none;
        margin:0px;
       
        .nut-cell__value{
            text-align: left !important;
            line-height: 30px;
            color: #000;
        }
    }
}

</style>
<style scoped>
.ybwarninfo{
    width: 100%;
    height: 100%;
    color:#000;
    font-size: 16px;
    /* background: #3b68dc; */
    .ybwarninfo_tab{
        height: 30px;
        line-height: 30px;
        display: flex;
        gap: 50px;
        padding: 0px 20px 10px 20px;
        color: #9ab1ea;
        >span{
            flex: 1;
            align-items: center;
            text-align: center;
            &.active{
                color: #fff;
                border-bottom: 2px solid #fff;
            }
        }
    }
    .future3DayConatin{
        background: #fff;
        height: calc(100% - 30px);
        width: 100%;
        border-top-left-radius: 20px;
        border-top-right-radius: 20px;
        padding-top: 5px;
        .titleConatin{
            width: 100%;
            text-align: center;
            height: 50px;
            line-height: 70px;
            background: #fff;
            margin-top: 10px;
            margin-bottom: 10px;
            color: #000;
            justify-content: center;
            display: flex;
            >div{
                width: 320px;
                position: relative;
                &.title1{
                    background-image: url("@/assets/images/titleBg1.png");
                    background-repeat: no-repeat;
                    background-position: center center;
                    background-size: contain;
                }
                &.title2{
                    background-image: url("@/assets/images/titleBg2.png");
                    background-repeat: no-repeat;
                    background-position: center center;
                    background-size: contain;
                }
            }
        }
        .foreTextTitle{
            margin:0px 20px;
            border-bottom: 2px solid red;
            padding-bottom: 5px;
            display: flex;
            justify-content: space-between;
            span{
                flex: 1;
                &:first-child{
                    text-align: left;
                }
                &:last-child{
                    text-align: right;
                }
            }
        }
        .foreTextDiv{
            padding:0px 10px;
            /* text-align: justify;
            margin-top: 10px;
            text-indent: 32px;
            letter-spacing: 1px;
            font-size: 17px;
            height: 190px;
            overflow-y: auto; */
            pre{
                white-space: break-spaces;
                overflow-y: auto;
                height: 190px;
                text-align: left;
            }
        }
        .areaCodeChange{
            width:100%;
            height: 30px;
            line-height: 30px;
            display: flex;
            justify-content: flex-start;
            .location{
                width: 40px;
                height: 100%;
                background-image: url('@/assets/images/location.png');
                background-repeat: no-repeat;
                background-position: center center;
            }
            .changeIcon{
                background-color: rgba(242, 244, 255, 1);
                width: 55px;
                height: 30px;
                text-align: right;
                border-radius: 5px;
                padding: 0px 5px;
                color: #333;
                font-size: 14px;
                background-image: url('@/assets/images/change.png');
                background-repeat: no-repeat;
                background-position: 10px center;
            }
        }

    }
    .future10DayConatin{
        background: #fff;
        height: calc(100% - 30px);
        width: 100%;
        border-top-left-radius: 20px;
       border-top-right-radius: 20px;
    }
    .futureChartContainPra{
        width: 100%;
        height: 350px;
        margin-bottom: 10px;
    }
    .futureChartContain {
        display: flex;
        flex-direction: column;
        padding: 5px;
        font-size: 13px;
        width: 100%;
        height: 100%;
        >div{
          flex: 1;
          display: flex;
        }
        .top{
          flex: 1.4;
          >div{
            flex: 1;
            text-align: center;
            >div{
              line-height: 20px;
            }
          }
          .time{
            font-size: 12px;
          }
          .wd{
            height: 18px;
          }
        }
        .bottom{
          flex: 1.4;
          >div{
            flex: 1;
            text-align: center;
            >div{
              line-height: 20px;
            }
          }
        }
      }



}
</style>